<template>
  <div class="about">
    <h1>匀速运动</h1>
    
    <div id="box" class="box" ref="box"></div>

     <div id="fs" class="fs" ref="fs"></div>
     <!-- <div class="box"></div> -->
  </div>
</template>
<script>
import  funs  from '../../utils/animationUtil.js'
  console.log("funs",funs)
export default {
  name: 'test',
  mounted(){
    let box = this.$refs.box;
    let fs = this.$refs.fs;
    console.log(fs)
    box.addEventListener('mouseover',()=>{
        funs.startAnimation(box, 0);
    })
    box.addEventListener('mouseout',()=>{
        funs.startAnimation(box, -180);
    })

    //第二种，参考不建议用
    fs.addEventListener('mouseover',()=>{
         fs.style.left='0px'
    })
    fs.addEventListener('mouseout',()=>{
         fs.style.left='-180px'
    })
  
  },
  methods:{

  }
}

</script>
<style scoped>
  #box, #fs{
    width: 200px;
    height: 200px;
    position: absolute;
    left: -180px;
    border-radius: 10px;
  }

  .box{
     background: lightblue;
     top:80px;
  }
  .fs{
     background: rgb(184, 21, 110);
     top:300px;
  }
</style>
